<%@page import="com.cqeec.myblog.model.Album"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="include/resources.jsp"%>
<link
	href="<%=contentPath%>/lib/polaroid-gallery/1.0.0/polaroid-gallery.css"
	rel="stylesheet">
<script type="text/javascript"
	src="<%=contentPath%>/lib/polaroid-gallery/1.0.0/polaroid-gallery.js"></script>
<title>相册——我的博客</title>
</head>
<body>
	<div class="container-fluid">
		<%@include file="include/header.jsp"%>
		<br />
		<%
					if (blogger != null) {
				%>
		<div class="row">
			<div class="col-2"></div>
			<div class="col-8">
				<form class="form-inline"
					action="<%=contentPath%>/app/album/photo/upload.html" method="post"
					enctype="multipart/form-data">
					<input type="hidden" name="albumId"
						value="<%=(String) request.getAttribute("albumId")%>">
					<div class="form-group">
						<label for="photoName" class="col-form-label">照片名：</label> <input
							type="text" class="form-control" id="photoName" name="photoName"
							placeholder="请输入照片名">
					</div>
					&nbsp;&nbsp;&nbsp;
					<div class="form-group">
						<input type="file" class="form-control-file" name="photoFile"
							id="photoFile" accept="image/jpeg,image/gif,image/png"
							onchange="previewPhoto()">
					</div>
					<div class="form-group">
						<button class="btn btn-primary" type="submit">上传</button>
					</div>
				</form>
				<img src="" id="imgPhoto">
				<!-- <div id="photoImages"></div>-->
			</div>
			<div class="col-2"></div>
		</div>
		<%} %>
		<div class="row">
			<div id="gallery" class="fullscreen"></div>
			<div id="gallery-nav" class="gallery-navbar">
				<button id="preview">&lt;前一张</button>
				<button id="next">下一张 &gt;</button>
			</div>
		</div>
		<div class="row" style="margin: 20px 0px;">
			<div class="col">
				<p class="text-center">&copy;2018&nbsp;&nbsp;&nbsp;重庆信息技术职业学院&nbsp;&nbsp;&nbsp;软件学院&nbsp;&nbsp;&nbsp;软件开发教研室&nbsp;&nbsp;&nbsp;唐礼飞</p>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			/*
			$("#photoFile").change(function(){
				//获取文件选择组件
				photoFile = $("#photoFile")[0];
				for(i=0;i<photoFile.files.length;i++){
					photoUrl=window.URL.createObjectURL(photoFile.files[i]);
					$("#photoImages").append('<img style="width:200px;height:200px;margin:10px;" src="'+photoUrl+'">');
				}
				//photoUrl=window.URL.createObjectURL(photoFile.files[0]);
				//$("#imgPhoto").attr("src",photoUrl);
			});
			*/
			new polaroidGallery("${contentPath}","<%=(String) request.getAttribute("albumId")%>");
		});
		function previewPhoto() {
			//获取文件选择组件
			photoFile = document.getElementById("photoFile");
			//创建FileReader对象
			photoFileReader = new FileReader();
			//绑定文件内容读取完成后的处理程序
			photoFileReader.onload = function(event) {
				document.getElementById("imgPhoto").src = event.target.result;
			};
			//读取文件
			photoFileReader.readAsDataURL(photoFile.files[0]);
		}
	</script>
</body>
</html>